<template>
  <div>
    <div
      :id="id"
      :class="className"
      :style="boxStyles"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import resize from './mixins/resize'

// import AMap from 'vue-amap'
// import AMap from 'AMap'
import 'echarts-extension-amap'
import { MOCKDATA } from './mock/mapdata'
// import AMapLoader from '@amap/amap-jsapi-loader'
import loadBMap from '@/components/BMap'

export default {
  name: 'MapChart',
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    xLabels: {
      type: Array,
      default: () => {
        return []
      }
    },
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '800px'
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data() {
    return {
      chart: null,
      tempOptions: null,

      chartItemSerie: {
        name: '--',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(137, 189, 27)',
            borderColor: 'rgba(137, 189, 2, 0.27)',
            borderWidth: 8
          }
        },
        data: []
      },
      data2: [
        {
          name: '下单量',
          color: 'primary',
          data: [
            {
              date: '2',
              value: 1220
            },
            {
              date: '',
              value: 2182
            },
            {
              date: '',
              value: 3191
            },
            {
              date: '',
              value: 1134
            },
            {
              date: '',
              value: 2150
            },
            {
              date: '',
              value: 3120
            },
            {
              date: '',
              value: 2110
            },
            {
              date: '',
              value: 125
            },
            {
              date: '',
              value: 145
            },
            {
              date: '',
              value: 4122
            },
            {
              date: '',
              value: 7165
            },
            {
              date: '',
              value: 822
            }
          ]
        },
        {
          name: '成交量',
          color: 'success',
          items: []
        },
        {
          name: '退款量',
          color: 'warning',
          items: []
        }
      ],
      map: null
      // mapInit() {
      //   AMapLoader.load({
      //     key: '0a2974fda0aad52f9162df790e66a8c7', // 申请好的Web端开发者Key，首次调用 load 时必填
      //     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      //     plugins: [] // 插件列表
      //   })
      //     .then(AMap => {
      //       const map = new AMap.Map('container', {
      //         center: [116.397428, 39.90923],
      //         zoom: 13
      //       })
      //       const trafficLayer = new AMap.TileLayer.Traffic({
      //         zIndex: 2
      //       })
      //       map.add(trafficLayer) // 添加图层到地图
      //     })
      //     .catch(e => {
      //       console.log(e)
      //     })
      // }
    }
  },
  computed: {
    boxStyles() {
      return { height: this.height, width: this.width }
    },
    categorys() {
      if (this.data && this.data.length) {
        return this.data.map(item => {
          return item.name
        })
      }
      return []
    },
    series() {
      var defaultSerie = this.chartItemSerie
      if (this.data && this.data.length) {
        return this.data.map(item => {
          return { ...defaultSerie, ...item }
        })
      }
      return []
    },
    interval() {
      var lens = this.xLabels.length
      return Math.ceil(lens / 6)
    }
  },
  watch: {
    data() {
      this.initChart()
    }
  },
  beforeMount() {
    // AMapLoader.load({
    //   key: 'c573541ee962147adc05c894114ba8ea', // 刚刚开发者申请哪里的key
    //   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
    // })
    //   .then(AMap => {
    //     this.map = new AMap.Map('container')
    //   })
    //   .catch(e => {
    //     console.log(e)
    //   })
  },
  mounted() {
    loadBMap('密钥').then(() => {
      // 配置option
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
      this.chart = echarts.init(document.getElementById(this.id))

      // AMap.initAMapApiLoader({
      //   key: 'c573541ee962147adc05c894114ba8ea', // 刚刚开发者申请哪里的key
      //   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
      // })

      var option

      const data = MOCKDATA.data
      const geoCoordMap = MOCKDATA.geoCoordMap
      const convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      option = {
        title: {
          text: '全国主要城市空气质量 - 百度地图',
          subtext: 'data from PM25.in',
          sublink: 'http://www.pm25.in',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        // bmap component option
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: 'water',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'land',
                elementType: 'all',
                stylers: {
                  color: '#f3f3f3'
                }
              },
              {
                featureType: 'railway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'highway',
                elementType: 'all',
                stylers: {
                  color: '#fdfdfd'
                }
              },
              {
                featureType: 'highway',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry.fill',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'poi',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'green',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'subway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'manmade',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'local',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'boundary',
                elementType: 'all',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'building',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'label',
                elementType: 'labels.text.fill',
                stylers: {
                  color: '#999999'
                }
              }
            ]
          }
        },
        series: [
          {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10
            },
            encode: {
              value: 2
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value
                })
                .slice(0, 6)
            ),
            symbolSize: function(val) {
              return val[2] / 10
            },
            encode: {
              value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: '#333'
            },
            emphasis: {
              scale: true
            },
            zlevel: 1
          }
        ]
      }
      option && this.chart.setOption(option)

      // var amapComponent = this.chart.getModel().getComponent('amap')
      // console.log('amapComponent', amapComponent)
      // // get the instance of AMap
      // var amap = amapComponent.getAMap()
      // console.log(amap)
      // operations below are the same as amap
      // amap.addControl(new this.$AMap.Scale())
      // amap.addControl(new this.$AMap.ToolBar())
    }
  }
}
</script>
